.nom-carousel {
  .nom-carousel-container {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
  }

  .nom-carousel-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0);

    .nom-carousel-slide {
      position: relative;
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      width: 100%;
      background-color: rgba(var(--nom-grey-9), .5);

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .nom-carousel-pagination {
    position: absolute;
    bottom: 10px;
    left: 0;
    z-index: 10;
    display: none;
    width: 100%;
    line-height: 8px;
    text-align: center;
    transition: opacity 0.3s;

    .nom-carousel-pagination-bullet {
      display: inline-block;
      width: var(--nom-carousel-bullet-width);
      height: var(--nom-carousel-bullet-height);
      margin: 0 4px;
      text-indent: -99999px;
      background-color: var(--nom-carousel-bullet-color);
      border-radius: var(--nom-carousel-bullet-radius);
      cursor: pointer;
    }

    .nom-carousel-pagination-bullet-active {
      background-color: var(--nom-carousel-bullet-theme);
    }
  }

  .nom-carousel-pagination-show {
    display: block;
  }

  .nom-carousel-buttons {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: none;
    justify-content: space-between;
    width: 100%;
    color: var(--nom-carousel-bullet-theme);
    text-align: center;
    transform: translateY(-50%);

    .nom-carousel-button-prev,
    .nom-carousel-button-next {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 4rem;
      height: 4rem;
      background-color: var(--nom-carousel-button-color);
      cursor: pointer;
    }

    .nom-carousel-button-prev {
      left: 0;
    }

    .nom-carousel-button-next {
      right: 0;
    }

    .nom-carousel-button-prev:hover,
    .nom-carousel-button-next:hover {
      background-color: var(--nom-carousel-button-hover-color);
    }
  }

  .nom-carousel-buttons-show {
    display: flex;
  }
}
